import React, { useState } from 'react';

const Layout = props => {
    const [current, setCurrent] = useState('/');
    return (
        <div>
            <div id="svgOutput">
                <svg width="140" height="170">
                    <title>cat</title>
                    <desc>strick figur</desc>

                    <circle cx="70" cy="95" r="50" style={{ stroke: 'black', fill: 'none' }} />
                    <circle cx="55" cy="80" r="5" style={{ stroke: 'black', fill: '#339933' }} />
                    <circle cx="85" cy="80" r="5" style={{ stroke: 'black', fill: '#339933' }} />
                    <g id="whiskers">
                        <line x1="75" y1="95" x2="135" y2="85" style={{ stroke: 'black' }} />
                        <line x1="75" y1="95" x2="135" y2="105" style={{ stroke: 'black' }} />
                    </g>
                    <use xlinkHref="#whiskers" transform="scale(-1 1) translate(-140 0)" />
                    {/* 耳朵 */}
                    <polyline points="108 62, 90 10, 70 45, 50 10, 32 62" style={{ stroke: 'black', fill: 'none' }} />
                    {/* 嘴 */}
                    <polyline points="35 110, 45 120, 95 120, 105 110" style={{ stroke: 'black', fill: 'none' }} />
                    {/* 鼻子 */}
                    <path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90" style={{ stroke: 'black', fill: '#ffcccc' }} />
                    <text x="60" y="165" style={{ fontSize: '14pt', stroke: 'none', fill: 'black' }}>Cat</text>
                </svg>
            </div>
        </div>
    );
};
export default Layout;